
<div style="POSITION: relative" id="content">
  <h3>easyUI 附加tree节点到tree </h3>
  <div id="article_content" class="article_content">
    <p>这个教程向你展示如何附加节点到tree,我们将创建一个食品tree包含水果和蔬菜节点,然后添加一些其他水果到已存在的水果节点.</p>
    <p><img src="documentation/images/1344826127_3486.png" alt=""><br>
    </p>
    <p></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 创建 foods(食品) tree</h4>
    首先,我们创建食品树,代码就像这样.
    <p>
    <pre name="code" class="html">&lt;div style=&quot;width:200px;height:auto;border:1px solid #ccc;&quot;&gt;  
    &lt;ul id=&quot;tt&quot; class=&quot;easyui-tree&quot; url=&quot;tree_data.json&quot;&gt;&lt;/ul&gt;  
&lt;/div&gt;  </pre>
    注意:tree组件 是定义在&lt;ul&gt;标记,树节点数据从URL&quot;tree_data.json&quot;加载. </p>

    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 得到父节点</h4>
    <p>然后我们通过点击节点选择fruit(食品节点),我们将添加一些其他的食品(fruit)数据,执行getSelected方法得到处理节点.
    
    <pre name="code" class="javascript">var node = $('#tt').tree('getSelected');  </pre>
    getSelected 方法的返回结果是一个javascript对象它有一个id,text和target 属性,target 属性是一个DOM对象,引用选中节点,它的append 方法将使用附加子节点. </p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 附加节点</h4>
    <pre name="code" class="javascript">var node = $('#tt').tree('getSelected');  
if (node){  
    var nodes = [{  
        &quot;id&quot;:13,  
        &quot;text&quot;:&quot;Raspberry&quot;  
    },{  
        &quot;id&quot;:14,  
        &quot;text&quot;:&quot;Cantaloupe&quot;  
    }];  
    $('#tt').tree('append', {  
        parent:node.target,  
        data:nodes  
    });  
}  </pre>
    当添加一些fruit(食品),你将看见:

    <p><img src="documentation/images/1344826904_1719.png" alt=""><br>
      </p>
    <p>正如你所看见的,使用easyui的tree
      插件去附加节点不是那么的难.
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI 示例:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://jquery-easyui.googlecode.com/svn/trunk/share/tutorial/tree/easyui-tree-demo3.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-tree-demo.zip</a></div>
    <br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>